<template>
    <view class="list">
        <view class="item" v-for="(item, i) in patientsList" :key="i" @tap="visitorSelect(item)" v-if="patientsList.length > 0">
            <view class="icon">
                <u-image width="180rpx" height="180rpx" :src="getServerStatic('/static/images/a21.png')"></u-image>
            </view>
            <view class="">
                <view class="user-info">
                    <view class="name">{{ item.name }}</view>
                    <view class="age">
                        <span v-if="item.sex === 1">男</span>
                        <span v-else>女</span>
                        {{ item.age }}
                    </view>
                    <view class="self" v-if="item.is_myself == 1">本人</view>
                </view>
                <view class="mobile">
                    {{ item.mobile }}
                </view>
            </view>
            <u-image width="36rpx" height="30rpx" :src="getServerStatic('/static/images/a22.png')"></u-image>
        </view>

        <u-empty
          v-else
          mode="data"
          icon="https://cdn.uviewui.com/uview/empty/data.png"
        >
        </u-empty>
    </view>
</template>

<script setup>
    import {ref, reactive, readonly} from 'vue'
    import {onLoad, onShow, onUnload} from '@dcloudio/uni-app'
    import {getPatients} from "@/api/user";
    import {getServerStatic} from "@/utils/tool";

    onLoad(() => {
        handleGetPatients()
    })

    // 列表
    const patientsList = ref([])

    const handleGetPatients = async () => {
        const {code, data, message} = await getPatients({})
        if (code === 1) {
            patientsList.value = data
        }
    }

    const visitorSelect = (item) => {
        uni.navigateTo({
            url: `/mine/medical/medical?patient_id=${item.id}`
        })
    }
</script>

<style lang="scss" scoped>
.list {
    padding: 50rpx 26rpx 180rpx;
    .item {
        @include between(100%);
        position: relative;
        margin-bottom: 30rpx;
        padding: 34rpx 38rpx;
        background: #FFFFFF;
        border-radius: 30rpx;
        box-shadow: 0 0 20rpx 1rpx rgba(187,187,187,.16);

        .icon {
            position: absolute;
            top: 0;
            right: 38rpx;
            z-index: 99;
        }

        .user-info {
            @include start();
            align-items: flex-end;
            .name {
                font-size: 32rpx;
                color: #312C2A;
            }
            .age {
                font-size: 26rpx;
                color: #606672;
                margin-left: 26rpx;
            }
            .self {
                @include center(86rpx, 38rpx);
                margin-left: 30rpx;
                background: linear-gradient(315deg, #4975EC 0%, #97B3FF 100%);
                border-radius: 7rpx;
                font-size: 26rpx;
                color: #fff;
            }
        }
        .mobile {
            margin-top: 38rpx;
            font-size: 26rpx;
            color: #606672;
        }
    }
}
.btn {
    padding: 0 55rpx;
    width: 100%;
    position: fixed;
    left: 50%;
    bottom: 70rpx;
    transform: translateX(-50%);
    z-index: 999;
}
</style>
